<template>
  <div ref="container" style="height: 95%"></div>
</template>
<script>
import { Gauge } from '@antv/g2plot';
export default {
  data() {
    return {}
  },
  methods: {
    loadCharts() {
      const gauge = new Gauge(this.$refs["container"], {
        percent: 0,
        range: {
          color: 'l(0) 0:#cdddfd 1:#5b8ff9',
        },
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        indicator: null,
        statistic: {
          title: {
            offsetY: -36,
            style: {
              fontSize: '28px',
              color: 'white',
            },
            formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          },
          content: {
            style: {
              fontSize: '32px',
              lineHeight: '44px',
              color: 'white',
            },
            formatter: () => 'scales',
          },
        },
      });

      gauge.render();
      let percent = 0;
      const interval = setInterval(() => {
        percent += 0.01;
        if (percent < 0.75) {
          gauge.changeData(percent);
        } else {
          percent = 0.75;
          gauge.changeData(percent);
          clearInterval(interval);
        }
      }, 100);
    }
  },
  mounted() {
    this.loadCharts();
  }
};
</script>
<style lang="scss">

</style>